<template>
	<div>
		<div class="container">
			<h2 style="text-align: center;">机械验收台账</h2>
			<div class="toolbar mt-2">
				<a-form ref="searchRef" layout="inline" :label-col="{style: { width: '100px' }}" :model="searchState" @finish="current=1;loading=true;initData()">
					<a-row :gutter="24">
						<a-col style="width: 400px;" :span="8">
							<a-form-item label="选择项目">
								<a-select v-model:value="searchState.project_id" :show-search="true" placeholder="请选择项目" :options="projectOptions" option-filter-prop="label" @change="changeProject"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="width: 400px;" :span="8">
							<a-form-item label="选择机械计划">
								<a-select v-model:value="searchState.plan_id" :show-search="true" placeholder="请选择计划" :options="planlist" option-filter-prop="label" @change="changePlan"></a-select>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<div class="mt-2">
				<!--
				v-if="!loading"使得:default-expand-all-rows="true"生效
				-->
				<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" row-key="id" children-column-name="children" :default-expand-all-rows="false" :data-source="acceptSource" :pagination="pagination" :loading="loading" @change="initData">
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'operation'">
							<a-space>
								<a-button type="primary" @click="confirm(record,1)">进场确认</a-button>
								<a-button type="primary" danger @click="confirm(record,2)">出场确认</a-button>
								<a-button type="default" @click="showAccept(record)">验收台账</a-button>
							</a-space>
						</template>
					</template>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";

import dayjs from "dayjs";

import { SearchOutlined } from "@ant-design/icons-vue";

import { post } from "../utils";

import { usePagination } from "vue-request";

const searchRef = ref();
const searchState = reactive({});
const projectOptions = ref([]);
const planlist = ref([]);
const contractlist = ref([]);
const userlist = ref([]); //供应商列表

const columns = [
	{
		title: "ID",
		dataIndex: "id",
		key: "id",
		width: 120,
		align: "left",
		fixed: "left"
	},
	{
		title: "项目名称",
		dataIndex: "project",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left",
		customRender: ({ text, record, index, column }) => {
			return text.name;
		}
	},
	{
		title: "机械配置计划名称",
		dataIndex: "name",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "计划编号",
		dataIndex: "code",
		sorter: false,
		width: 150,
		ellipsis: true
	},
	{
		title: "计划日期",
		dataIndex: "plan_date",
		sorter: false,
		width: 160,
		align: "center"
	},
	{
		title: "计划制定人",
		dataIndex: "opr_user",
		width: 120,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			//return (text || []).map(d => `${d.fullname || d.username}`).join(",");
			return text.fullname || text.username;
		}
	},
	{
		title: "最后更新时间",
		dataIndex: "update_time",
		width: 120,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "操作",
		key: "operation",
		sorter: false,
		fixed: "right",
		width: 300,
		align: "center"
	}
];
const tableScroll = computed(() => ({ x: document.documentElement.clientWidth - 650 }));

const { data, loading, run, current, pageSize, total } = usePagination(params => post("plan", { type: 3, ...params, ...searchState }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});

const acceptSource = computed(() =>
	(data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		return d;
	})
);

const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters, ...searchState };

	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
post("department/projects?type=3").then(({ data }) => {
	projectOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
post("plan", { type: 3 }).then(({ data }) => {
	planlist.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
post("contract", { type: 2 }).then(({ data }) => {
	contractlist.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
post("user", { is_supplier: 1 }).then(({ data }) => {
	userlist.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
const changeProject = value => {
	const project_id = value;
	post("plan", { type: 2, project_id: project_id, page_size: 1000 }).then(({ data }) => {
		planlist.value = data.map(d => {
			return {
				value: d.id,
				label: d.name
			};
		});
	});
};
const changePlan = value => {
	const plan_id = value;
	post("contract", { plan_id: plan_id, page_size: 1000 }).then(({ data }) => {
		contractlist.value = data.map(d => {
			return {
				value: d.id,
				label: d.name
			};
		});
	});
};

const router = useRouter();
const confirm = ({ id }, type) => {
	if (type === 1) {
		//进场确认
		router.push(`accept/editzz/${id}?type=2`);
	} else {
		router.push(`accept/editzc/${id}?type=2`);
	}
};
const showAccept = ({ id }) => {
	router.push(`acceptlog/${id}`);
};
</script>
<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}
</style>